<template>
  <div class="add_new">
    <van-popup
      v-model="modifyShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon="cross"
      close-icon-position="top-left"
    >
      <div class="head">
        <div class="title">修改待办</div>
        <div class="affirm" @click="handleModifyTodo">修改</div>
      </div>
      <van-field v-model="modifyMessage" rows="10" autosize type="textarea" placeholder="请输入待办事项" />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: {
    modifyIndex: {
      type: Number,
      default: 0
    },
    modifyShow: {
      type: Boolean,
      default: false
    },
    modifyMessage: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      modifyShow: false,
      modifyMessage: ''
    }
  },
  methods: {
    // 修改待办内容
    handleModifyTodo(e) {
      this.$axios({
        url: '/api/todo/edit/' + this.modifyIndex,
        method: 'post',
        headers: {
          Authorization: localStorage.getItem('todo_token')
        },
        data: {
          edit: this.modifyMessage,
          email: this.email
        }
      }).then(res => {
        console.log(res)
        this.$emit('modifyShowChange', false)
        this.$emit('modifyMessageChange', '')
        this.getTodo()
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
.add_new {
    font-family: '楷体';

    .head {
      position: relative;
      width: 100%;
      height: 3.5rem;
      background: rgb(51, 51, 51);
      color: #eeeeee;
      font-family: '楷体';
      font-size: 1.5rem;

      .title {
        font-size: 1.5rem
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        left: 50%;
        transform: translateX(-50%);
      }

      .affirm {
        font-size: 1.5rem
        position: absolute;
        top: 30%;
        transform: translateY(-50%);
        right: -0.5rem;
        transform: translateX(-50%);
      }
    }
  }
</style>
